@import vars
@import fonts
@import libs
@import cleancss

::placeholder
	color: #666

::selection
	background-color: $color-primary-strong-cyan
	color: white

input, textarea
	outline: none
	&:focus:required:invalid
		border-color: red
	&:required:valid
		border-color: green

.grid-test
	border: 1px solid #000000

body
	background-color: #fff
	font-size: 18px
	min-width: 320px
	max-width: 1440px
	position: relative
	line-height: 1.65
	font-family: 'Bai', sans-serif
	overflow-x: hidden
	color: $color-neutral-dgb
	margin: 0 auto

h1, h2, h3
	font-weight: 600
	text-align: center
h1
	font-size: 2.063rem
h2
	font-size: 1.625rem
h3
	font-size: 1.375rem

header
	background: url(../img/bg-header-desktop.png) center top no-repeat
	width: 100vw
	margin-left: calc(-50vw + 50%)
	display: grid
	grid-template-columns: auto
	margin-bottom: 160px
	svg
		justify-self: center
		margin:
			top: 130px
			bottom: 68px
	h1
		margin-bottom: 25px
	p
		justify-self: center
		margin-bottom: 55px
		text-align: center
		max-width: 700px
	div
		justify-self: center
		button
			width: 227px
			height: 53px
			font-size: 0.95rem
			font-weight: 600
			border-radius: 40px
			border: none
			color: #ffffff
			&:first-child
				background-color: $color-primary-strong-cyan
				box-shadow: 0 4px 0 0 darken($color-primary-strong-cyan, 5%)
				&:hover
					background-color: lighten($color-primary-strong-cyan, 5%)
					box-shadow: 0 4px 0 0 lighten($color-primary-strong-cyan, 5%)
			&:last-child
				background-color: $color-primary-light-blue
				box-shadow: 0 4px 0 0 darken($color-primary-light-blue, 5%)
				&:hover
					background-color: lighten($color-primary-light-blue, 5%)
					box-shadow: 0 4px 0 0 lighten($color-primary-light-blue, 5%)
	@media only screen and (max-device-width: 576px)
		background: url("../img/bg-header-mobile.png") center top no-repeat
		background-size: cover


.main
	display: grid
	h2
		margin-bottom: 40px
	> p
		text-align: center
		max-width: 700px
		justify-self: center
	.desktop-full
		display: grid
		grid-template-columns: 1fr 1fr
		grid-column-gap: 110px
		margin:
			top: 86px
			bottom: 160px
		.img-desktop img
			width: 100%
			height: auto
			position: relative
			left: -30px
			clip-path: inset(0 0 0 30px)
		.text-desktop
			display: grid
			max-width: 340px
			align-content: space-evenly
			h3
				text-align: left
				margin-bottom: 20px
			p
				font-size: 0.889rem

.devices-sec
	display: grid
	justify-content: center
	margin-bottom: 100px
	h2
		padding-bottom: 30px
	p
		max-width: 700px
		text-align: center
		justify-self: center
		padding-bottom: 120px
	img
		width: 100%
		margin: auto 0

.block-change
	h2
		margin-bottom: 40px
	p
		text-align: center
	.block-icons
		display: grid
		grid-template-columns: repeat(3, max(355px))
		grid-template-rows: auto
		text-align: center
		justify-content: space-evenly
		margin-top: 70px
		svg
			margin-bottom: 40px
		h3
			margin-bottom: 30px

.block-vendors
	display: grid
	grid-template-columns: repeat(5, 1fr)
	grid-template-rows: auto
	justify-items: center
	margin:
		top: 160px
		bottom: 160px

.block-clipboard
	display: grid
	margin-bottom: 100px
	h2
		margin-bottom: 40px
	p
		margin-bottom: 50px
		text-align: center
		max-width: 700px
		justify-self: center
	div
		justify-self: center
		button
			width: 227px
			height: 53px
			font-size: 0.95rem
			font-weight: 600
			border-radius: 40px
			border: none
			color: #ffffff
			&:first-child
				background-color: $color-primary-strong-cyan
				box-shadow: 0 4px 0 0 darken($color-primary-strong-cyan, 5%)
				&:hover
					background-color: lighten($color-primary-strong-cyan, 5%)
					box-shadow: 0 4px 0 0 lighten($color-primary-strong-cyan, 5%)
			&:last-child
				background-color: $color-primary-light-blue
				box-shadow: 0 4px 0 0 darken($color-primary-light-blue, 5%)
				&:hover
					background-color: lighten($color-primary-light-blue, 5%)
					box-shadow: 0 4px 0 0 lighten($color-primary-light-blue, 5%)

footer
	display: grid
	//grid-template-columns: 350px 800px 290px
	grid-template-columns: 1fr minmax(auto, 800px) 1fr
	grid-template-rows: 65px
	background-color: #f5f6f8
	padding:
		top: 45px
		bottom: 45px
	.footer-logo
		justify-self: center
		svg
			width: 55px
			height: 55px
	.footer-menu ul
		display: grid
		grid-template-columns: repeat(3, 1fr)
		a
			color: $color-neutral-dgb
			font-weight: 600
			text-decoration: none
			&:hover
				color: $color-primary-strong-cyan
	.footer-social
		align-self: center
		a
			margin-right: 25px
		#Hifi---Desktop:hover
				fill: $color-primary-strong-cyan
	.footer-fem
		grid-column: 1 / 4
		margin-top: 20px

.parent // Lazy Load Placeholder Generator: https://webdesign-master.ru/services/lazy/
	background-image: url()
